import {
    Breadcrumb, Avatar, Image, Button, Tag, Tabs, Space, Table, Modal
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import './index.scss'
import { useNavigate } from 'react-router';
import copy from "../../../../../utils/copy";

const { TabPane } = Tabs;


const AddGoods = () => {
    const navigate = useNavigate();

    //tab标签页
    const onChange = (key) => {
        console.log(key);
    };
    //tab标签页的第一个表格
    function TableList(props) {
        return (
            <div className="clumns-1 clumns">
                <div className="top">订单编号：</div>
                <div className="bottom">
                    <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"></Image>
                    <div className="right">
                        <p>西班牙语高级直达</p>
                        <div>
                            <span>单价：400</span>
                            <span>数量：1</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
    function TableList2(props) {
        return (
            <div className="clumns-2 clumns">
                <div className="top">下单时间：</div>
                <div className="bottom">
                    <Image src="https://joeschmoe.io/api/v1/random"></Image>
                    <div className="right">
                        <span>王五</span>
                        <p>18898274652</p>
                    </div>
                </div>
            </div>
        );
    }
    function TableList3(props) {
        return (
            <div className="clumns-3 clumns">
                <div className="top">微信支付：</div>
                <div className="bottom">APP</div>
            </div>
        );
    }
    function TableList4(props) {
        return (
            <div className="clumns-4 clumns">
                <div className="top">配送：</div>
                <div className="bottom">无需配送</div>
            </div>
        );
    }
    function TableList5(props) {
        return (
            <div className="clumns-5 clumns">
                <div className="top">状态</div>
                <div className="bottom">已完成</div>
            </div>
        );
    }
    function TableList6(props) {
        const navigate = useNavigate();
        const pathSkip = () => {
            navigate("/home/order/details", {
                replace: false,
                state: { content: props.content },
            });
        };
        return (
            <div className="clumns-6 clumns">
                <div className="top">实付款(元)：</div>
                <div className="bottom">
                    <Space size="middle">
                        <a onClick={pathSkip}>订单详情</a>
                        <a
                            onClick={() => {
                                copy(1234556);
                            }}
                        >
                            复制订单
                        </a>
                    </Space>
                </div>
            </div>
        );
    }
    const columns = [
        {
            title: "商品信息",
            key: "shoopdata",
            render: (_, record) => TableList(),
        },
        {
            title: "会员信息",
            key: "userdata",
            render: (_, record) => TableList2(),
        },
        {
            title: "订单来源",
            key: "source",
            render: (_, record) => TableList3(),
        },
        {
            title: "发货方式",
            key: "way",
            render: (_, record) => TableList4(),
        },
        {
            title: "订单状态",
            key: "status",
            render: (_, record) => TableList5(),
        },
        {
            title: "操作",
            key: "caozuo",
            render: (_, record) => <TableList6 content={record} />,
        },
    ];

    const data = [
        {
            key: "1",
            shoopdata: "John Brown",
            userdata: 32,
            source: "New York No. 1 Lake Park",
            way: "无需发货",
            status: "无需发货",
        },
        {
            key: "2",
            shoopdata: "John Brown",
            userdata: 32,
            source: "New York No. 1 Lake Park",
            way: "无需发货",
            status: "无需发货",
        },
        {
            key: "3",
            shoopdata: "John Brown",
            userdata: 32,
            source: "New York No. 1 Lake Park",
            way: "无需发货",
            status: "无需发货",
        },
        {
            key: "4",
            shoopdata: "John Brown",
            userdata: 32,
            source: "New York No. 1 Lake Park",
            way: "无需发货",
            status: "无需发货",
        },
    ];
    //表格的页码
    const showTotal = (total) => `数量 ${total} 条`;

    //tab标签页的第二个表格
    const columns2 = [
        {
            title: '操作时间',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '操作前数值',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '积分数值',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作后积分',
            key: 'tags',
            dataIndex: 'tags',
        },
        {
            title: '积分原因',
            key: 'tags2',
            dataIndex: 'tags2',
        },
        {
            title: '备注',
            key: 'action',
            dataIndex: 'action',
        },
    ];
    const data2 = [
        {
            key: '1',
            name: '2020/09/08 10:45',
            age: 32,
            address: '+20',
            tags: 2200,
            tags2: '购买商品',
            action: '无'
        },
        {
            key: '2',
            name: '2020/09/08 10:45',
            age: 32,
            address: '+20',
            tags: 2200,
            tags2: '购买商品',
            action: '无'
        },
        {
            key: '3',
            name: '2020/09/08 10:45',
            age: 32,
            address: '+20',
            tags: 2200,
            tags2: '购买商品',
            action: '无'
        },
    ];
    //表格的页码
    const showTotal2 = (total) => `数量 ${total} 条`;

    //tab标签页的第三个表格
    const columns3 = [
        {
            title: '操作时间',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '操作前成长值',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '成长值数值',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作后成长值',
            key: 'tags',
            dataIndex: 'tags',
        },
        {
            title: '成长值原因',
            key: 'tags2',
            dataIndex: 'tags2',
        },
        {
            title: '备注',
            key: 'action',
            dataIndex: 'action',
        },
    ];
    const data3 = [
        {
            key: '1',
            name: '2020/09/08 10:45',
            age: 32,
            address: '+20',
            tags: 2200,
            tags2: '购买商品',
            action: '无'
        },
        {
            key: '2',
            name: '2020/09/08 10:45',
            age: 32,
            address: '+20',
            tags: 2200,
            tags2: '购买商品',
            action: '无'
        },
        {
            key: '3',
            name: '2020/09/08 10:45',
            age: 32,
            address: '+20',
            tags: 2200,
            tags2: '购买商品',
            action: '无'
        },
    ];
    //表格的页码
    const showTotal3 = (total) => `数量 ${total} 条`;

    //tab标签页的第四个表格
    const columns4 = [
        {
            title: '操作时间',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '优惠券名称',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '面值（元）',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '获取渠道',
            key: 'tags',
            dataIndex: 'tags',
        },
        {
            title: '使用状态',
            key: 'tags2',
            dataIndex: 'tags2',
        },
        {
            title: '操作备注',
            key: 'action',
            dataIndex: 'action',
        },
        {
            title: '操作',
            key: 'action2',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={del}>删除</a>
                </Space>
            ),
        },
    ];
    const data4 = [
        {
            key: '1',
            name: '2020/09/08 10:45',
            age: '新人专享优惠券',
            address: 20,
            tags: 'APP领取',
            tags2: '未使用',
            action: '无'
        },
        {
            key: '1',
            name: '2020/09/08 10:45',
            age: '新人专享优惠券',
            address: 20,
            tags: 'APP领取',
            tags2: '未使用',
            action: '无'
        },
        {
            key: '1',
            name: '2020/09/08 10:45',
            age: '新人专享优惠券',
            address: 20,
            tags: 'APP领取',
            tags2: '未使用',
            action: '无'
        },
    ];
    //表格的页码
    const showTotal4 = (total) => `数量 ${total} 条`;

    //第四个表格的删除
    const { confirm } = Modal;
    const del = () => {
        confirm({
            title: '删除优惠券',
            icon: <ExclamationCircleOutlined />,
            content: '删除后会员将无法查看并使用此优惠券，确定删除吗？',
            okText: '确认',
            cancelText: '取消',
            centered: true,

            onOk() {
                console.log('OK');
            },

            onCancel() {
                console.log('Cancel');
            },
        });
    };

    return <div className='addGoodsMain'>
        <div className='addGoodsTop'>
            <div>
                <Breadcrumb>
                    <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                    <Breadcrumb.Item>用户查询</Breadcrumb.Item>
                    <Breadcrumb.Item>用户详情</Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <h2>用户详情</h2>
        </div>
        <div className='addGoodsMiddle'>
            <p className='addGoodsMiddleItem1'>基础资料</p>
            <div className='addGoodsMiddleItem2'>
                <div className='left'>
                    <Avatar size={74} shape='circle'
                        src={
                            <Image
                                src="https://joeschmoe.io/api/v1/random"
                                style={{
                                    backgroundColor: '#fde3cf',
                                }}
                            />
                        }
                    />
                    <Button type='primary'>编辑资料</Button>
                </div>
                <div className='right'>
                    <div className='right-item1'>
                        <ul>
                            <li>用户姓名：<span>曲丽丽</span></li>
                            <li>用户性别：<span>女</span></li>
                            <li>用户职业：<span>产品经理</span></li>
                            <li>来源方式：<span>APP</span></li>
                            <li>备注：<span>无</span></li>
                        </ul>
                    </div>
                    <div className='right-item2'>
                        <ul>
                            <li>手机号码：<span>18890900900</span></li>
                            <li>用户年龄：<span>23</span></li>
                            <li>常用收货人：<span>曲丽丽</span></li>
                            <li>注册时间：<span>2019-09-09 10:40</span></li>
                        </ul>
                    </div>
                    <div className='right-item3'>
                        <ul>
                            <li>用户ID：<span>20210908789900</span></li>
                            <li>微信号：<span>xiaowanzi1995</span></li>
                            <li>详细地址：<span>浙江省杭州市西湖区工专路</span></li>
                            <li>最近登录时间：<span>2019-09-09 10:40</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div className='addGoodsMiddle'>
            <p className='addGoodsMiddleItem1'>用户标签</p>
            <div className='addGoodsMiddleItem2'>
                <div className='tag'>
                    <Tag>标签一</Tag>
                    <Tag>标签二</Tag>
                </div>
            </div>
        </div>
        <div className='addGoodsMiddle'>
            <p className='addGoodsMiddleItem1'>用户资产</p>
            <div className='addGoodsMiddleItem2 ziC'>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>累计积分</p>
                    <p style={{ fontSize: '20px' }}>400</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>累计成长值</p>
                    <p style={{ fontSize: '20px' }}>3000</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>付费会员卡</p>
                    <p style={{ fontSize: '20px', color: 'orange' }}>年度大会员</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>会员等级</p>
                    <p style={{ fontSize: '20px' }}>白金</p>
                </div>
            </div>
        </div>
        <div className='addGoodsMiddle'>
            <p className='addGoodsMiddleItem1'>行为统计</p>
            <div className='addGoodsMiddleItem2 ziC'>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>下单数量</p>
                    <p style={{ fontSize: '20px' }}>4</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>下单金额（元）</p>
                    <p style={{ fontSize: '20px' }}>3000</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>最近消费时间</p>
                    <p style={{ fontSize: '20px' }}>2019-09-09 10:40</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>今日学习时长(h)</p>
                    <p style={{ fontSize: '20px' }}>6</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>学习总时长(h)</p>
                    <p style={{ fontSize: '20px' }}>400</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>学习总课程数量</p>
                    <p style={{ fontSize: '20px' }}>3</p>
                </div>
                <div>
                    <p style={{ color: 'rgb(138, 129, 129)' }}>完成总课程数量</p>
                    <p style={{ fontSize: '20px' }}>3</p>
                </div>
            </div>
        </div>
        <div className='addGoodsMiddle'>
            <div className='addGoodsMiddleItem1 list-bottom'>
                <Tabs defaultActiveKey="1" onChange={onChange}>
                    <TabPane tab="订单记录" key="1">
                        <Table
                            rowKey={(record) => record.key}
                            pagination={{
                                total: 20,
                                showTotal: showTotal,
                                showSizeChanger: true,
                                showQuickJumper: true,
                            }}
                            columns={columns}
                            dataSource={data}
                        />
                    </TabPane>
                    <TabPane tab="积分记录" key="2">
                        <Table columns={columns2} dataSource={data2}
                            pagination={{
                                total: 20,
                                showTotal: showTotal2,
                                showSizeChanger: true,
                                showQuickJumper: true,
                            }} />
                    </TabPane>
                    <TabPane tab="成长值记录" key="3">
                        <Table columns={columns3} dataSource={data3}
                            pagination={{
                                total: 20,
                                showTotal: showTotal3,
                                showSizeChanger: true,
                                showQuickJumper: true,
                            }} />
                    </TabPane>
                    <TabPane tab="优惠券" key="4">
                        <Table columns={columns4} dataSource={data4}
                            pagination={{
                                total: 20,
                                showTotal: showTotal4,
                                showSizeChanger: true,
                                showQuickJumper: true,
                            }} />
                    </TabPane>
                </Tabs>
            </div>
        </div>
    </div>
}
export default AddGoods;